<template>
  <div class="file-load">
    <div class="upload-btn mb20" @click="visible = true" v-if="isEdit">上传</div>
    <el-table :data="formData.productDataList.filter(item => item.type === 3)" border>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="remark" label="文件名称"></el-table-column>
      <el-table-column prop="gmtCreate" label="上传时间" />
      <el-table-column prop="createByName" label="上传者">
        <template #default="{ row }">
          <span>
            {{ row.userName || row.createByName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template #default="{ row }">
          <div class="d-flex align-center">
            <el-link type="primary" @click="downHandler(row)">下载</el-link>
            <el-button class="ml10" type="text" @click="delPlanFn(row)" v-if="isEdit">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <UploadModal
    v-if="visible"
    v-model:visible="visible"
    @success="uploadChange"
    :accept="acceptConst[3]"
    :prefix-data="PRODUCTPRIVATE"
    :limit-number="1000"
    :multiple="true"
  />
</template>
<script setup>
import { ref, inject } from "vue";
import UploadModal from "@/components/Upload/UploadModal.vue";
import { useUserStore } from "@/stores/modules/user";
import dayjs from "dayjs";
import { downFilesOpen, generateUUID } from "@/utils";
import { useUtils } from "../../hooks/useUtils";
const { acceptConst, deleteFile } = useUtils();
import { PRODUCTPRIVATE } from "@/constants";
// import { useHandleData } from "@/hooks/useHandleData";
// import { ResultEnum } from "@/enums/httpEnum";
const userStore = useUserStore();
const visible = ref(false);
// const urlResource = inject("urlResource");
const isEdit = inject("isEdit");

const formData = defineModel("formData", {
  type: Object,
  default: () => {
    return {
      productDataList: []
    };
  }
});
const uploadChange = data => {
  formData.value.productDataList.unshift({
    remark: data.originalFileName,
    gmtCreate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    createByName: userStore.userInfo.name || userStore.userInfo.mobile,
    category: 0,
    categorySub: 0,
    type: 3,
    path: data.path,
    uuid: generateUUID(),
    previewLink: data.previewLink
  });
};

const downHandler = async data => {
  downFilesOpen(data.path, data.originalFileName || data.remark);
};
// const downHandler = async row => {
//   try {
//     const data = await downloadFile({
//       filePath: row.path
//     });
//     downFilesOpen(data, row.originalFileName || row.remark);
//   } catch (e) {
//     console.log(e);
//   }
// };
const delPlanFn = async params => {
  if (params.path) {
    deleteFile(params.path);
  }
  formData.value.productDataList = formData.value.productDataList.filter(item => item.uuid !== params.uuid);
  // await useHandleData(
  //   params =>
  //     new Promise(resolve => {
  //       formData.value.productDataList = formData.value.productDataList.filter(item => item.uuid !== params.uuid);
  //       resolve({ code: ResultEnum.SUCCESS });
  //     }),
  //   { uuid: item.uuid },
  //   `删除【${item.remark}】`
  // );
};
</script>
<style lang="scss" scoped>
.file-load {
  :deep(.el-table) {
    --el-table-header-bg-color: rgb(242 243 245 / 100%);
  }
  .upload-btn {
    height: 45px;
    line-height: 45px;
    color: rgb(83 120 246 / 100%);
    text-align: center;
    cursor: pointer;
    border: 1px dashed #5378f6;
    border-radius: 4px;
  }
}
</style>
